<template>
  <div class="home">
    <top-nav></top-nav>
    <!-- banner -->
    <loading v-if="banner.length == 0"></loading>
    <van-swipe autoplay="3000" @change="changeBannber">
      <van-swipe-item v-for="ba in banner" :key="ba.id">
        <router-link :to="ba.url" tag="div" class="item">
          <img :src="ba.pic" />
        </router-link>
      </van-swipe-item>
      <template v-slot:indicator>
        <ul class="indicator">
          <li
            v-for="i in banner.length"
            :key="i"
            :class="{ currentItem: i - 1 == index }"
          >
            {{ i }}
          </li>
        </ul>
      </template>
    </van-swipe>
    <!-- 导航菜单 -->
    <van-grid class="grid" v-if="result" :border="true">
      <van-grid-item
        v-for="item in result.menus"
        :key="item.id"
        :text="item.name"
        :url="item.url"
      >
        <template #icon>
          <img :src="item.pic" class="grid-item-icon" />
        </template>
      </van-grid-item>
    </van-grid>
    <!-- 通知栏 -->
    <van-notice-bar
      v-if="result"
      class="scroll-notice"
      background="#fff"
      :scrollable="false"
    >
      <van-swipe
        vertical
        class="notice-swipe"
        :autoplay="2000"
        :show-indicators="false"
      >
        <van-swipe-item v-for="item in result.roll" :key="item.id">
          <div class="scrollitem">
            <span>{{ item.info }}</span>
            <i class="fa fa-angle-right"></i>
          </div>
        </van-swipe-item>
      </van-swipe>
      <template #left-icon>
        <img
          class="notice-left-icon"
          width="100"
          src=""
        />
      </template>
    </van-notice-bar>
    <!-- 快速选择 带更多-->
    <div class="fast">
      <div class="font">
        <list-title>快速选择</list-title>
        <router-link to="/category">更多<van-icon name="arrow" /></router-link>
      </div>
      <div class="wrap">
        <ul class="flex">
          <loading v-if="fastList.length == 0"></loading>
          <li @click="$router.push(`/search/${item.cate_name}`)" v-for="item in fastList" :key="item.id">
            <div>
              <img :src="item.pic" />
              <div>{{ item.cate_name }}</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 推荐列表 带更多 -->
    <div class="recommend">
      <div class="font">
        <list-title>精品推荐</list-title>
        <router-link to="/newhot/1">更多<van-icon name="arrow" /></router-link>
      </div>
      <loading v-if="bastBanner.length == 0"></loading>
      <van-swipe class="my-swipe" indicator-color="rgb(233, 51, 35)">
        <van-swipe-item v-for="r in bastBanner" :key="r.id">
          <img :src="r.img" />
        </van-swipe-item>
      </van-swipe>
      <div>
        <loading v-if="bastList.length == 0"></loading>
        <shop-list :shoplist="bastList"></shop-list>
      </div>
      <div class="likeinfo">
        <div class="flex">
          <h1>热门榜单</h1>
          <span>根据销量、搜索、好评等综合得出</span>
          <router-link to="/newhot/2"
            >更多<van-icon name="arrow"
          /></router-link>
        </div>
        <div class="red"></div>
        <div class="list">
          <loading v-if="likeInfo.length == 0"></loading>
          <img-item :imgitem="likeInfo"></img-item>
        </div>
      </div>
      <div class="new">
        <list-title
          >首发新品<sup
            style="
              position: absolute;
              top: -5px;
              color: var(--cy-Color);
              font-size: 14px;
              padding: 0px 5px;
            "
            >NEW~</sup
          ></list-title
        >
        <router-link to="/newhot/3">更多<van-icon name="arrow" /></router-link>
        <div>
          <img-item :imgitem="firstList"></img-item>
        </div>
      </div>
      <div class="benefit">
        <list-title>促销单品</list-title>
        <router-link to="/newhot/4">更多<van-icon name="arrow" /></router-link>
        <hot-list :benefit="benefits"></hot-list>
      </div>
    </div>
  </div>
</template>

<script>
import ShopList from "@/components/ShopList";
import ListTitle from "@/components/ListTitle";
import ImgItem from "@/components/ImgItem";
import Loading from "@/components/Loading";
import HotList from "@/components/HotList";
import TopNav from '@/components/TopNav.vue';
export default {
  name: "Home",
  props: {
    shoplist: Array,
    imgitem: Array,
    benefit: Array,
  },
  data() {
    return {
      index: 0,
      banner: [],
      result: null,
      bastList: [],
      fastList: [],
      bastBanner: [],
      likeInfo: [],
      firstList: [],
      benefits: [],
    };
  },
  created() {
    this.axios.get("/index").then((re) => {
      // console.log(re);
      // console.log(this.$store.getters.LoginToken);
      this.banner = re.banner;
      this.result = re;
      this.fastList = re.info.fastList;
      // console.log(re.info.fastList);
      this.bastBanner = re.info.bastBanner;
      this.bastList = re.info.bastList;
      this.likeInfo = re.likeInfo;
      this.firstList = re.info.firstList;
      this.benefits = re.benefit;
    });
  },
  methods: {
    changeBannber(index) {
      this.index = index;
    },
  },
  components: {
    ShopList,
    ListTitle,
    ImgItem,
    Loading,
    HotList,
    TopNav,
  },
};
</script>

<style scoped lang="less">
.logo {
  width: 62px;
}
.item {
  img {
    width: 100%;
    height: 190px;
    display: block;
  }
}
.indicator {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  li {
    text-indent: -9999px;
    margin-right: 5px;
    width: 10px;
    height: 2px;
    background: rgba(255, 255, 255, 1);
    &.currentItem {
      background: rgba(255, 255, 255, 0.5);
    }
  }
}
.grid {
  .grid-item-icon {
    width: 45px;
    height: 45px;
  }
}
.notice-swipe {
  line-height: 37px;
  height: 37px;
}
.scroll-notice {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  box-shadow: 0px 0px 10px #eee;
  .notice-left-icon {
    width: 62px;
  }
  .van-notice-bar__content.van-ellipsis {
    width: 100%;
  }
  .scrollitem {
    padding-left: 20px;
    color: #333;
    display: flex;
    align-items: center;
    span {
      flex: 1;
    }
    i {
      width: 94vw;
      text-align: right;
    }
  }
}
.fast {
  height: 200px;
  overflow: hidden;
  font-size: 16px;
  .font {
    position: relative;
    width: 100%;
    height: 35px;
    line-height: 30px;
    a {
      position: absolute;
      color: #666;
      font-size: 14px;
      right: 10px;
      top: 0;
    }
  }

  .wrap {
    height: 190px;
    overflow-x: scroll;
    overflow-y: hidden;
    ul {
      width: 300%;
      display: flex;
      li {
        // flex: 1;
        width: 100px;
        height: 140px;
        /* box-sizing: border-box; */
        margin: 6px;
        padding-bottom: 3px;
        &:nth-child(3n) {
          border-bottom: 2px solid #fc4141;
        }
        &:nth-child(3n-1) {
          border-bottom: 2px solid #1aff5f;
        }
        &:nth-child(3n-2) {
          border-bottom: 2px solid #4182fc;
        }
        div {
          text-align: center;
          img {
            width: 100%;
            height: 110px;
          }
          div {
            width: 99px;
            height: 25px;
            line-height: 25px;
            border-left: 1px solid #9999991e;
            border-right: 1px solid #9999991e;
          }
        }
      }
    }
  }
}
.recommend {
  div.font {
    position: relative;
    width: 100%;
    height: 30px;
    font-size: 16px;
    a {
      position: absolute;
      color: #888;
      font-size: 14px;
      right: 10px;
      top: 0;
    }
  }
  .my-swipe {
    .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 60px;
      text-align: center;
    }
    img {
      width: 100%;
      height: 150px;
    }
  }
}
.likeinfo {
  position: relative;
  padding-bottom: 5px;
  div.flex {
    color: white;
    display: flex;
    align-items: baseline;
    h1 {
      font-size: 20px;
      padding: 10px 10px 0;
    }
    a {
      position: absolute;
      right: 5px;
      font-size: 14px;
      top: 12px;
      color: white;
    }
    span {
      font-size: 12px;
    }
  }
  .red {
    width: 100%;
    height: 80px;
    background: var(--cy-Color);
    position: absolute;
    z-index: -1;
    top: 0px;
    border-radius: 0px 0px 20px 20px;
  }
  .list {
    width: 96vw;
    background: white;
    margin: 10px auto;
    border-radius: 10px;
    box-shadow: 0px 4px 9px 0px;
    color: #5b5b5b33;
    ul {
      display: flex;
      justify-content: space-around;
      padding: 2.5vw;
      border-radius: 10px;
    }
  }
}
.new {
  position: relative;
  a {
    color: #888;
    font-size: 14px;
    position: absolute;
    top: 0px;
    right: 10px;
  }
  div {
    height: 220px;
    ul {
      display: flex;
      overflow: auto;
      justify-content: space-between;
      padding: 10px;
    }
    ul::-webkit-scrollbar {
      width: 0 !important;
    }
  }
}
.benefit {
  position: relative;
  a {
    position: absolute;
    top: 0px;
    right: 10px;
    font-size: 14px;
    color: #888;
  }
}
</style>
